<template>
	<view class="container">
		<view class="fixed-nav">
			<scroll-view class="scroll-view_H" scroll-x="true">
				<view class="nav-class">
					<view class="nav-title" v-for="(item, index) in navList" :key="index" @click="onTabChange(index)"
						:class="{active: index === currentIndex}">{{ item.name }}</view>
				</view>
			</scroll-view>
		</view>
		<z-paging ref="paging" v-model="orderList" @query="getOrderList" class="zpaging">
			<view v-if="orderList.length > 0">
				<view class="m20 bg-color-white container-radius order-list" @click="onTap(item)"
					v-for="(item,index) in orderList" :key="item.id">
					<view class="p20">
						<view class="flex_c_end f28 c666">
							<view class="status f28" 
								:class="(item.orderStatus==6||item.orderStatus==7||item.orderStatus==8)?'status1':''">
								<text v-if="item.orderStatus == 0" class="f24" style="color:#fff">待上传</text>
								<text v-if="item.orderStatus == 1" class="f24" style="color:#fff">待审核</text>
								<text v-if="item.orderStatus == 2" class="f24" style="color:#fff">待确认</text>
								<text v-if="item.orderStatus == 3 && item.payStatus == 1" class="f24"
									style="color:#fff">待支付</text>
								<text v-else-if="item.orderStatus == 3" class="f24" style="color:#fff">已确认</text>
								<text v-if="item.orderStatus == 4" class="f24" style="color:#fff">待发货</text>
								<text v-if="item.orderStatus == 5" class="f24" style="color:#fff">待收货</text>
								<text v-if="item.orderStatus == 21" class="f24" style="color:#fff">待自提</text>
								<!-- <text v-else-if="item.orderStatus == 4" class="f28" style="color:#FF9A46">待发货</text> -->
								<!-- <text v-else-if="item.orderStatus == 5" class="f28" style="color:#2893FF">待收货</text> -->
								<text v-if="item.orderStatus == 6 || item.orderStatus == 7" class="f24"
									style="color:#38BF87">已完成</text>
								<text v-if="item.orderStatus == 8" class="f24" style="color:#999999">已取消</text>
							</view>
							<!-- TODO-T 用于测试 -->
							<!-- <view>订单id：{{orderList.id}}</view> -->
							<!-- ----------- -->
						</view>
						<view class="pt10">
							<view class="shopItem flex_m" v-for="(items,indexs) in item.orderItemVos" :key="items.id">
								<!-- <view class="shopItem_img">
						  <image lazy-load src="{{item.icon}}" mode="aspectFill"></image>
						</view> -->
								<view class="flex_lr orderContent_goods flex1 mb15">
									<view class="f28 c333 ell_more ell_2 flex1">
										<!-- TODO-T 正式代码 -->
										<!-- <view>{{item.productName}}</view> -->
										<!-- TODO-T 测试代码 -->
										<view class="c333 f32">{{items.productName}} 
											<tags v-if="items.rxType=='强制纸质处方'" 
												text="强"></tags>
										</view>
										<!-- --------- -->
										<view class="c999 f24 mt10">{{items.spec}}</view>
									</view>
									<view class="flex_tb">
										<view class="f28 c999 flex_c_end mt5">
											x{{items.quantity}}
										</view>
										<view class="f28 b flex_c_end c333 mt5">
											¥{{items.salePrice}}
										</view>
										
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="orderFot mt10">
						<view class="tr f28 c666 flex_lr_m ">
							共{{item.orderItemVos.length}}件商品
							<view class="flex_m" v-if="item.orderStatus >= 3 && item.payStatus != 1">
								<!-- 合计： -->
								<text>
									璧积分：<span class="price-text">{{item.couponPay}}分</span><br>  
									实付：<span class="price-text">{{item.realPay}}元</span>
								</text>
							</view>
							<view class="flex_m" v-else> 
								<!-- 合计： -->
								<text>
									璧积分待扣除：<span class="price-text">{{item.couponPay}}分</span><br>  
									待支付：<span class="price-text">{{item.realPay}}元</span>
								</text>
							</view>
						</view>
						<view>
							<view class="btn flex_c_end">
								<view
									v-if="item.orderStatus == 0 || item.orderStatus == 1 || item.orderStatus == 2 || item.payStatus == 3 "
									class="removeBtn f26 flex_c_m mt20" @click="onCancel(item)">取消订单
								</view>
								<view v-if="item.orderStatus == 0" class="payBtn f26 flex_c_m mt20"
									@click.stop="onUpload(item)">
									去上传</view>
								<!-- <view v-if="{{item.orderStatus == 3 && item.payStatus == 1}}" class="payBtn f26 flex_c_m" catchtap="onPay" data-item='{{item}}'>支付</view> -->
								<view v-if="item.orderStatus == 5" class="lookWl f26 flex_c_m mt20"
									@click.stop="onLogistics(item)">
									查看物流
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</z-paging>
	</view>
</template>

<script>
	import {
		ref,
		reactive
	} from "vue"
	import {
		onLaunch,
		onShow,
		onHide
	} from '@dcloudio/uni-app'
	import {
		qzApi
	} from '@/config/request.js';
	import useZPaging from "@/uni_modules/z-paging/components/z-paging/js/hooks/useZPaging.js";

	export default {
		data() {
			return {
				navList: [{
						name: '全部',
						orderStatus: -1
					}, {
						name: '待上传',
						orderStatus: 0
					},
					{
						name: '待确认',
						orderStatus: 2
					}, {
						name: '待支付',
						orderStatus: 3
					}, {
						name: '待发货',
						orderStatus: 4
					}, {
						name: '待收货',
						orderStatus: 5
					}, {
						name: '待自提',
						orderStatus: 21
					}, {
						name: '已完成',
						orderStatus: 7
					}, {
						name: '已取消',
						orderStatus: 8
					}
				],
				currentIndex: 0,
				queryForm: {
					orderStatus: null,
					pageNo: 1,
				},
				orderList: [{
					orderItemVos: []
				}]
			}
		},
		// 下拉刷新
		onRefresh() {
			// 告知z-paging下拉刷新结束，这样才可以开始下一次的下拉刷新
			setTimeout(() => {
				// 1.5秒之后停止刷新动画
				this.$refs.paging.complete(false);
			}, 1500)
		},

		
		methods: {

			onTabChange(index) {
				this.currentIndex = index
				this.queryForm.orderStatus = index == 0 ? null : this.navList[index].orderStatus
				this.orderList = []
				this.paging = []
				// this.getOrderList(1)
				this.$refs.paging.reload();
			},

			async getOrderList(pageNo) {
				try {
					let form = {
						orderStatus: this.queryForm.orderStatus,
						pageNo: pageNo,
					}
					const data = await qzApi.getOrderList(form);
					const data1 = data.data ? data.data.records : []
					this.$refs.paging.complete(data1);
					// console.log(orderList.value)
				} catch (error) {

				}
			},

			//详情
			onTap(item) {
				uni.redirectTo({
					url: "/page1/order/index?id=" + item.id + '&type=' + item.type
				})
			},
			onUpload(item) {
				uni.removeStorageSync("describe")
				uni.removeStorageSync("describe1")
				uni.navigateTo({
					url: '/page1/product/describe?id=' + item.id
				})
				// uni.redirectTo({
				// 	url: "/page1/upload/index?id=" + item.id
				// })
			},
			//取消订单
			async onCancel(data) {
				uni.showModal({
					title: '',
					content: '确定取消订单吗？',
					showCancel: true,
					cancelText: '点错了',
					cancelColor: '#666666',
					confirmText: '确定',
					success: (result) => {
						if (result.confirm) {
							cancelOrderRequest(data.id)
						}
					}
				})
			},
			async cancelOrderRequest(id) {
				try {
					let params = {
						orderId: id
					}
					const data = await qzApi.cancelOrder(params);
					if (data.code == 0) {
						uni.showToast({
							title: '取消成功',
							icon: 'success',
							duration: 3000
						})
						getOrderList()
					} else {
						uni.showToast({
							icon: 'none',
							title: data.msg
						})
					}
				} catch (error) {
					// 处理错误
					console.error('信息失败:', error);
				}
			},
			onLogistics(data) {
				console.log(data)
				uni.navigateTo({
					url: '/page1/logisticsDetail/index?orderId=' + data.id,
				})
			}
		},

	}
</script>

<style lang="scss" scoped>
	.container {
		background: #F8F8F8;
	}

	.fixed-nav {
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		z-index: 10;
		background: #fff;
	}

	.nav-class {
		display: flex;
	}

	.nav-title {
		padding: 0 30rpx;
		flex: none;
		font-size: 28rpx;
		line-height: 88rpx;
		position: relative;
	}

	.nav-title.active::after {
		position: absolute;
		content: '';
		width: 80rpx;
		height: 6rpx;
		border-radius: 6rpx;
		background: #527AF0;
		left: 50%;
		bottom: 0;
		transform: translateX(-50%);
	}

	.item {
		width: 100%;
		box-sizing: border-box;
		background: #fff;
		margin-top: 20rpx;
	}

	.item:last-child {
		margin-bottom: 0rpx;
	}

	.shopItem_img image {
		width: 120rpx;
		height: 120rpx;
		border-radius: 8rpx;
		border: 1rpx solid #eeeeee;
	}

	.orderContent_goods {
		// height: 80rpx;
	}

	.prompt {
		padding-top: 8rpx;
		padding-bottom: 20rpx;
		text-align: right;
		color: #f06454;
	}

	.btn view {
		width: 160rpx;
		height: 56rpx;
		margin-left: 32rpx;
		border-radius: 8rpx;
	}

	.removeBtn {
		border: 2rpx solid #E4E4E4;
		color: #666;
	}

	.lookWl {
		border: 2rpx solid var(--themeColor);
		color: var(--themeColor);
	}

	.payBtn {
		background: var(--themeColor);
		border: 2rpx solid var(--themeColor);
		color: #fff;
	}

	.order_goods_encrypt {
		height: 120rpx;
		background: linear-gradient(270deg, #ffffff 0%, #f5f5f5 100%);
		border-radius: 8rpx;
	}

	.order_goods {
		background: #fafcff;
		border-radius: 8rpx;
	}

	.order_tag10 {
		background: var(--themeColor);
		color: #fff;
	}

	.price-text {
		color: #ff0000;
	}

	.zpaging {
		padding-top: 100rpx;
	}
	.order-list{
		position: relative;
		padding-top: 40rpx;
		border-radius: 20rpx;
		overflow: hidden;
	}
	.status{
		position: absolute;
		right: 0;
		top: 0;
		width: 144rpx;
		height: 54rpx;
		background: #236EFF;
		border-radius: 0 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.status1{
		background: rgba(153,153,153,.1);
		color: #999;
	}
	.orderFot{
		padding: 20rpx;
		background: #EBEEFC;
	}
</style>